<!-- 课程清单 -->
<template>
  <div class="train-container">
    <div v-if="configDetailShow === 1">
      <div ref="searchRef" class="flex-center table-top">
        <SearchFrom ref="searchFormRef" @search="search" />
      </div>
      <div class="mg-b-8">
        <px-button v-has="'ALL_TRAINMANAGE_TRAINCONFIG_ADD'" type="primary" @click="handleAdd">新增</px-button>
      </div>
      <div v-loading="loading" class="table-content">
        <px-table height="calc(100vh - 340px)" :data="tableData" size="small" border class="common-table" @selection-change="tableSelect">
          <px-table-column prop="name" label="培训名称" min-width="220" show-overflow-tooltip />
          <px-table-column prop="typeName" label="培训类型" min-width="120" show-overflow-tooltip />
          <px-table-column prop="coverJSON" label="封面" min-width="80" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.coverJSON === null || scope.row.coverJSON.length === 0">-</span>
              <px-image
                v-else
                :src="scope.row.coverJSON[0].fileUrl"
                :preview-src-list="scope.row.coverJSON.map(item => item.fileUrl)"
                :z-index="999999"
                class="table-img"
                fit="cover"
                preview-teleported
              />
            </template>
          </px-table-column>
          <px-table-column prop="trainingStatus" label="状态" min-width="80" show-overflow-tooltip align="center">
            <template #default="scope">
              <span v-if="scope.row.trainingStatus === null" />
              <div v-else :class="[scope.row.trainingStatus === 'N' ? 'unPublished-status' : 'published-status']">
                <span :class="['status-point', scope.row.trainingStatus === 'N' ? 'unPublished-status-point' : 'published-status-point']" />
                <span class="status-span">{{ formatTrainingStatus(scope.row.trainingStatus) }}</span>
              </div>
            </template>
          </px-table-column>
          <px-table-column prop="departmentName" label="科室" min-width="120" show-overflow-tooltip />
          <px-table-column prop="examName" label="关联考试" min-width="120" show-overflow-tooltip />
          <px-table-column prop="updateByName" label="更新人" min-width="120" show-overflow-tooltip />
          <px-table-column prop="updateTime" label="更新时间" min-width="80" show-overflow-tooltip />
          <px-table-column label="操作" width="150" fixed="right" align="center">
            <template #default="scope">
              <px-tooltip content="发布" placement="top">
                <px-button
                  v-if="scope.row.trainingStatus === 'N'"
                  v-has="'ALL_TRAINMANAGE_TRAINCONFIG_PUBLISH'"
                  link
                  type="primary"
                  @click="handlePublish(scope.row)"
                >
                  <PublishIcon />
                </px-button>
              </px-tooltip>
              <px-tooltip content="下架" placement="top">
                <px-button
                  v-if="scope.row.trainingStatus === 'P'"
                  v-has="'ALL_TRAINMANAGE_TRAINCONFIG_DELIST'"
                  link
                  type="primary"
                  @click="handleUnPublish(scope.row)"
                >
                  <OffShelfIcon />
                </px-button>
              </px-tooltip>
              <px-tooltip content="管理学员" placement="top">
                <px-button link icon="RecipeManagement" type="primary" @click="handleManageStudent(scope.row)" />
              </px-tooltip>
              <px-tooltip content="编辑" placement="top">
                <px-button
                  v-if="scope.row.trainingStatus === 'N'"
                  v-has="'ALL_TRAINMANAGE_TRAINCONFIG_EDIT'"
                  link
                  icon="EditPen"
                  type="primary"
                  @click="handleEdit(scope.row)"
                />
              </px-tooltip>
              <px-tooltip content="删除" placement="top">
                <px-button v-has="'ALL_TRAINMANAGE_TRAINCONFIG_DELETE'" link icon="Delete" type="danger" @click="handleDelete(scope.row)" />
              </px-tooltip>
            </template>
          </px-table-column>
        </px-table>
        <pagination v-show="total > 0" v-model:page="pageNum" v-model:limit="pageSize" class="table-pagination" :total="total" @pagination="search" />
      </div>
    </div>
    <div v-if="configDetailShow === 2">
      <AddTrain :handleType="handleType" :rowData="rowData" @goBack="goBack" />
    </div>
    <div v-if="configDetailShow === 3">
      <TrainManageStudent :handleType="handleType" :rowData="rowData" @goBack="goBack" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import SearchFrom from "../component/searchForm.vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { getTrainConfigListAPI, deleteTrainConfigAPI, publishAPI, offShelfAPI } from "@/api/knowledge/train";
import PublishIcon from "@/assets/svg/knowledge/publish.svg?component";
import OffShelfIcon from "@/assets/svg/knowledge/offShelf.svg?component";
import AddTrain from "./component/addTrain.vue";
import TrainManageStudent from "./component/trainManageStudent.vue";

defineOptions({
  name: "ALL_TRAINMANAGE_TRAINCONFIG"
});

const searchFormRef = ref();
const searchRef = ref();

const state = reactive({
  loading: false,
  tableData: [],
  pageNum: 1,
  pageSize: 20,
  total: 10,
  tableSelectedData: [],
  configDetailShow: 1, // 1：列表页面；2：新增页；3：管理页
  activeStep: 1,
  handleType: "Add",
  rowData: {}
});
const { loading, tableData, pageNum, pageSize, total, configDetailShow, handleType, rowData } = toRefs(state);

onMounted(() => {
  search();
});

// 查询
const search = async p => {
  try {
    state.loading = true;
    const params = {
      size: state.pageSize,
      current: state.pageNum,
      name: p ? p.name : "",
      type: p ? p.type : "",
      department: p ? p.className : ""
    };
    const res = await getTrainConfigListAPI(params);
    state.total = res.total;
    state.tableData = res.records;
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

const formatTrainingStatus = v => {
  const list = {
    N: "未发布",
    P: "已发布"
  };
  return list[v];
};

const tableSelect = val => {
  state.tableSelectedData = val;
};

// 新增
const handleAdd = () => {
  state.handleType = "Add";
  state.rowData = {};
  state.configDetailShow = 2;
};

// 发布
const handlePublish = async row => {
  const { id, trainingStatus } = row;
  const params = {
    id,
    trainingStatus
  };
  await publishAPI(params);
  PxMessage.success("发布成功");
  search();
};

// 下架
const handleUnPublish = async row => {
  const { id, trainingStatus } = row;
  const params = {
    id,
    trainingStatus
  };
  await offShelfAPI(params);
  PxMessage.success("下架成功");
  search();
};

// 管理学员
const handleManageStudent = row => {
  state.handleType = "Edit";
  state.rowData = row;
  state.configDetailShow = 3;
};

// 编辑
const handleEdit = row => {
  state.handleType = "Edit";
  state.rowData = row;
  state.configDetailShow = 2;
};

// 删除
const handleDelete = row => {
  PxMessageBox.confirm("是否确认删除", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      await deleteTrainConfigAPI({ id: row.id });
      PxMessage.success("删除成功");
      search();
    })
    .catch(() => {});
};

// 返回
const goBack = () => {
  state.configDetailShow = 1;
  search();
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/knowledge/trainManage/scss/common.scss");
// 单元格样式
:deep(.px-table__cell) {
  position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
}

.table-img {
  width: 40px;
  height: 40px;
}

.status-point {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
}

.unPublished-status {
  color: #f59e0b;
}

.unPublished-status-point {
  background: #f59e0b;
}

.published-status {
  color: #10b981;
}

.published-status-point {
  background: #10b981;
}
</style>
